<template>
	<view class="content">
		<!-- 头部 -->
		<view class="header">
			<view class="user-info">
				<view class="avatar">
					<image :src="userInfo.avatar" v-if="userInfo.avatar" mode="aspectFill"></image>
					<image src="/static/img/icon_me.png" v-else mode="aspectFill"></image>
					
				</view>
				<view class="user-detail">
					<view class="nickname">{{userInfo.realname}}</view>
					<view class="account">ID: {{userInfo.id}}</view>
				</view>
				<view class="rule-link" @click="goRule">金币规则</view>
			</view>
		</view>
		
		<!-- 金币统计 -->
		<view class="coin-stats">
			<view class="stat-item">
				<view class="stat-title">可用金币</view>
				<view class="stat-value">{{keyong}}</view>
			</view>
			<view class="divider"></view>
			<view class="stat-item">
				<view class="stat-title">待结算金币</view>
				<view class="stat-value">{{daiyong}}</view>
			</view>
		</view>
		
		<!-- 筛选区域 -->
		<view class="filter-section">
			<view 
				class="filter-item" 
				:class="{active: currentFilter === 'all'}"
				@click="setFilter('all','')"
			>全部</view>
			<view 
				class="filter-item"
				:class="{active: currentFilter === 'used'}"
				@click="setFilter('used',2)"
			>已使用</view>
			<view 
				class="filter-item"
				:class="{active: currentFilter === 'earned'}"
				@click="setFilter('earned',1)"
			>待使用</view>
			<view
				class="filter-item"
				:class="{active: currentFilter === 'dai'}"
				@click="setFilter('dai',0)"
			>待结算</view>
		</view>
		
		<!-- 金币明细列表 -->
		<view class="coin-list">
			<view class="list-header">
				<view class="amount">金币数量</view>
				<view class="type">获取方式</view>
				<view class="time">金币时间</view>
			</view>
			
			<view v-if="coinList.length > 0">
				<view class="list-item" v-for="(item, index) in coinList" :key="index">
					<view class="amount" :class="{negative: item.status ==2}">
						{{ item.status ==2 ? '-' + item.goldNum : '+'+item.goldNum }}
					</view>
					<view class="type">{{ item.type_dictText }}</view>
					<view class="time">{{ item.createTime }}</view>
				</view>
			</view>
			
			<view v-else class="empty-tips">
			
				<view>暂无金币记录</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentFilter: 'all',
				/* coinList: [
					{ amount: +10, type: '签到奖励', time: '07-15 08:30', filter: 'earned' },
					{ amount: -5, type: '兑换商品', time: '07-14 15:45', filter: 'used' },
					{ amount: +20, type: '任务奖励', time: '07-13 12:20', filter: 'earned' },
					{ amount: +15, type: '分享奖励', time: '07-12 09:15', filter: 'earned' },
					{ amount: -8, type: '兑换优惠券', time: '07-11 18:40', filter: 'used' },
					{ amount: +30, type: '活动奖励', time: '07-10 14:25', filter: 'earned' },
					{ amount: -12, type: '兑换服务', time: '07-09 11:30', filter: 'used' },
					{ amount: +25, type: '新手奖励', time: '07-08 10:15', filter: 'earned' },
					{ amount: +18, type: '邀请奖励', time: '07-07 16:20', filter: 'earned' },
					{ amount: -15, type: '兑换会员', time: '07-06 13:45', filter: 'used' }
				], */
				userInfo:'',
				pageNo:1,
				coinList:[],
				daiyong:0,
				keyong:0,
				status:'',
			}
		},
		computed: {
			filteredList() {
				/* if (this.currentFilter === 'all') {
					return this.coinList;
				}
				return this.coinList.filter(item => item.filter === this.currentFilter); */
			}
		},
		onLoad() {
			 this.userInfo= uni.getStorageSync("userInfo")
			// 页面加载时执行
			this.getTotalGoldNumByUserId()
			this.qyeryPage()
		},
		methods: {
			qyeryPage(){
				uni.showLoading({
					title: '加载中'
				})
				this.$http('jeecg-boot/app/market/bicGoldRecord/qyeryPage',{
						status:this.status,//状态(0-待核销,1-可使用,2-已消费)'
						pageNo:this.pageNo,
						pageSize:10
						
				},'POST').then(res => {
						   //console.log(res)
					 uni.hideLoading();
					// this.continuousDays=res.result
					var coinList=res.result.records
					this.coinList=[...this.coinList, ...coinList]
				 })
			},
			getTotalGoldNumByUserId(){
				uni.showLoading({
					title: '加载中'
				})
				this.$http('jeecg-boot/app/market/bicGoldRecord/getTotalGoldKsyNumByUserId',{
					/* userId:this.userInfo.id,
				    status:1 */
				},'GET').then(res => {
						   //console.log(res)
					 uni.hideLoading();
					 this.keyong=res.result.totalGoldNum
					// this.continuousDays=res.result
					
				 })
				 this.$http('jeecg-boot/app/market/bicGoldRecord/getTotalGoldNumByUserId',{
				 	userId:this.userInfo.id,
				     status:0
				 },'GET').then(res => {
				 		   //console.log(res)
				 	 uni.hideLoading();
				 	 this.daiyong=res.result.totalGoldNum
				 	// this.continuousDays=res.result
				 	
				  })
			},
			setFilter(type,num) {
				this.currentFilter = type;
				this.status=num
				this.coinList=[]
				this.qyeryPage()
			},
			goRule(){
				uni.navigateTo({
					url:'goldRule'
				})
			}
		}
	}
</script>

<style scoped>
	/* 这里放置上面CSS样式表中的所有样式 */
	/* 由于篇幅限制，这里不重复放置，实际使用时请将上面的CSS内容复制到这里 */
	.content {
	            display: flex;
	            flex-direction: column;
	            min-height: 100vh;
	            padding-bottom: 140rpx;
	        }
	        
	        /* 头部样式 */
	        .header {
	            background: linear-gradient(135deg, #ff971e, #ff6600);
	            padding: 30rpx 30rpx 60rpx 30rpx;
	            color: white;
	            position: relative;
	        }
	        
	        .user-info {
	            display: flex;
	            align-items: center;
	            margin-bottom: 40rpx;
	        }
	        
	        .avatar {
	            width: 100rpx;
	            height: 100rpx;
	            border-radius: 50%;
	            background-color: #fff;
	            margin-right: 20rpx;
	            overflow: hidden;
	            border: 2rpx solid rgba(255, 255, 255, 0.5);
	        }
	        
	        .avatar image {
	            width: 100%;
	            height: 100%;
	        }
	        
	        .user-detail {
	            flex: 1;
	        }
	        
	        .nickname {
	            font-size: 36rpx;
	            font-weight: bold;
	            margin-bottom: 8rpx;
	        }
	        
	        .account {
	            font-size: 24rpx;
	            opacity: 0.9;
	        }
	        
	        .rule-link {
	            font-size: 28rpx;
	            padding: 10rpx 20rpx;
	            background: rgba(255, 255, 255, 0.2);
	            border-radius: 30rpx;
	        }
	        
	        /* 金币统计 */
	        .coin-stats {
	            display: flex;
	            background-color: #fff;
	            border-radius: 20rpx;
	            padding: 30rpx;
	            margin: 0 30rpx;
	            box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
	            position: relative;
	            top: -40rpx;
	        }
	        
	        .stat-item {
	            flex: 1;
	            text-align: center;
	            padding: 10rpx;
	        }
	        
	        .stat-title {
	            font-size: 28rpx;
	            color: #666;
	            margin-bottom: 15rpx;
	        }
	        
	        .stat-value {
	            font-size: 44rpx;
	            font-weight: bold;
	            color: #ff971e;
	        }
	        
	        .divider {
	            width: 2rpx;
	            background-color: #eee;
	            margin: 0 20rpx;
	        }
	        
	        /* 筛选区域 */
	        .filter-section {
	            background-color: #fff;
	            padding: 20rpx 30rpx;
	            display: flex;
	            margin: -20rpx 30rpx 20rpx 30rpx;
	            border-radius: 16rpx;
	            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
	        }
	        
	        .filter-item {
	            flex: 1;
	            text-align: center;
	            padding: 20rpx 0;
	            font-size: 28rpx;
	            color: #666;
	            position: relative;
	        }
	        
	        .filter-item.active {
	            color: #ff971e;
	            font-weight: bold;
	        }
	        
	        .filter-item.active::after {
	            content: '';
	            position: absolute;
	            bottom: 0;
	            left: 50%;
	            transform: translateX(-50%);
	            width: 80rpx;
	            height: 6rpx;
	            background-color: #ff971e;
	            border-radius: 3rpx;
	        }
	        
	        /* 金币明细列表 */
	        .coin-list {
	            flex: 1;
	            background-color: #fff;
	            margin: 0 30rpx;
	            border-radius: 16rpx;
	            overflow: hidden;
	            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
	        }
	        
	        .list-header {
	            display: flex;
	            padding: 25rpx 30rpx;
	            border-bottom: 1rpx solid #f0f0f0;
	            font-size: 26rpx;
	            color: #999;
	            background-color: #fafafa;
	        }
	        
	        .list-header .amount {
	            flex: 1;
	            text-align: center;
	        }
	        
	        .list-header .type {
	            flex: 1.5;
	            text-align: center;
	        }
	        
	        .list-header .time {
	            flex: 1.5;
	            text-align: right;
	        }
	        
	        .list-item {
	            display: flex;
	            padding: 30rpx;
	            border-bottom: 1rpx solid #f0f0f0;
	            font-size: 28rpx;
	        }
	        
	        .list-item:last-child {
	            border-bottom: none;
	        }
	        
	        .list-item .amount {
	            flex: 1;
	            text-align: center;
	            font-weight: bold;
	            color: #09bb07;
	        }
	        
	        .list-item .amount.negative {
	            color: #e64340;
	        }
	        
	        .list-item .type {
	            flex: 1.5;
	            text-align: center;
	            color: #333;
	        }
	        
	        .list-item .time {
	            flex: 1.5;
	            text-align: right;
	            color: #999;
	        }
	        
	        .empty-tips {
	            text-align: center;
	            padding: 60rpx 0;
	            color: #999;
	            font-size: 28rpx;
	        }
	        
	        .empty-icon {
	            font-size: 80rpx;
	            margin-bottom: 20rpx;
	            opacity: 0.5;
	        }
	        
	        /* 底部操作区 */
	        .action-bar {
	            display: flex;
	            padding: 30rpx;
	            position: fixed;
	            bottom: 0;
	            left: 0;
	            right: 0;
	            background: #fff;
	            box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
	        }
	        
	        .action-btn {
	            flex: 1;
	            text-align: center;
	            padding: 20rpx;
	            margin: 0 15rpx;
	            border-radius: 50rpx;
	            font-size: 30rpx;
	            font-weight: bold;
	        }
	        
	        .btn-exchange {
	            background: linear-gradient(135deg, #ff971e, #ff6600);
	            color: white;
	        }
	        
	        .btn-withdraw {
	            background: #f0f0f0;
	            color: #666;
	        }
</style>